<template>
    <div>
        <!--mint-ui组件：轮播图-->
        <mt-swipe :auto="4000">
            <mt-swipe-item>1</mt-swipe-item>
            <mt-swipe-item>2</mt-swipe-item>
            <mt-swipe-item>3</mt-swipe-item>
        </mt-swipe>

        <!--mui组件：九宫格girl-default-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <span class="mui-icon mui-icon-home"></span>
                <div class="mui-media-body">Home</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                <div class="mui-media-body">Email</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <span class="mui-icon mui-icon-chatbubble"></span>
                <div class="mui-media-body">Chat</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <span class="mui-icon mui-icon-location"></span>
                <div class="mui-media-body">location</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4"><a href="#">
                <span class="mui-icon mui-icon-search"></span>
                <div class="mui-media-body">Search</div></a></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
                <router-link to="/home/newsList">
                <span class="mui-icon mui-icon-phone"></span>
                <div class="mui-media-body">消息列表</div>
                </router-link></li>
        </ul>
    </div>

</template>
<script>

    export default {

    }
</script>
<style scoped>
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: 1px solid white;

    }
    .mui-grid-view.mui-grid-9{
        background-color: white;

    }
    .mui-table-view{
        margin-top: 50px;
    }

.mui-table-view-cell{
    height: 200px !important;
    margin: 10px 0 !important;
}
.mui-icon{
    font-size: 70px !important;
}
    .mui-media-body{
        height: 60px !important;
        line-height: 60px !important;
        font-size: 40px !important;
    }

</style>